<script setup lang="ts">
import MathTime31 from '../components/MathTime31.vue'
import MathAdd from '../components/MathAdd.vue'
import { random } from '../stores/util'

function randomColor() {
  function fix(num: number) {
    if (num < 16) {
      return '0' + num.toString(16)
    }
    return num.toString(16).toUpperCase()
  }
  return '#' + fix(random(0, 255)) + fix(random(0, 255)) + fix(random(0, 255))
}

const rawColors = 'a'.repeat(50).split('').map(() => randomColor())

</script>
<template>
  <div>
    <div class="flex flex-wrap gap-2">
      <div v-for="color in rawColors" :key="color" :style="{ backgroundColor: color }" class="p-2 w-21 h-10">
        {{ color }}
      </div>
    </div>
    <MathAdd></MathAdd>
    <MathTime31></MathTime31>
  </div>
</template>